import React from "react";
import PureRenderMixin from 'react-addons-pure-render-mixin'
import NavHeader from '../../../components/NavHeader/NavHeader'
import FilterHeader from '../FilterHeader/FilterHeader.jsx';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getDataByFilter } from '../actions/contentListAction'
import "./Main.scss";
import ListItem from "../../../components/ListItem/ListItem.jsx";
import Scroll from 'react-bscroll'
import"style-loader!css-loader!react-bscroll/lib/react-scroll.css";

class Main extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.fetchData();
    }

    fetchData () {
        this.props.getDataByFilterAction(true) // 加载首屏数据
    }

    shouldComponentUpdate() {}

    // 渲染第一页
    renderContentList() {
        let list = this.props.contentList
        return list.map((item, index)=>{
            return <ListItem key={index} itemData={item}></ListItem>
        });
    }


    loadMoreData = () => {
        let isend = this.props.isend
        if(isend) {
            return Promise.resolve()
        } else {
            return new Promise((resolve) => {
                this.props.getDataByFilterAction(false)
                setTimeout(() => {
                    resolve()
                }, 600)
            })
        }
    }


    render() {
        return (
            <div className='box'>
                <NavHeader title="分类" />
                <FilterHeader></FilterHeader>
                <div className="scroll-box">
                    <Scroll scrollbar={false}
                            pullUpLoad
                            isPullUpTipHide={ false }
                            pullUpLoadMoreData={this.loadMoreData}
                    >
                        {
                            this.renderContentList()
                        }
                    </Scroll>
                </div>
            </div>
        );
    }
}


export default connect(
    (state) => {
        return {
            contentList: state.getContentListReducer.list,
            isend: state.getContentListReducer.isend
        }
    },
    (dispatch) => {
        return {
            getDataByFilterAction : bindActionCreators(getDataByFilter, dispatch)
        }
    }
)(Main);
